<template>
	<view class="SelectDate">
		<view class="pop-section width100">
			<view class="filter border-bottom text-align">
				<text class="font-weight-600 color3 size-28">数据统计</text>
			</view>
			<view class="select-title">
				<view class="select-item dis color-8" :class="{'background color-f':selectDataIndex == item.type}"
					v-for="(item,index) in selectData" :key="index" @click="onSelectData(item)">
					<text class="font-weight-400 size-28">{{item.name}}</text>
				</view>
			</view>
			<view class="sele-data text-align" @click="dateRange = true">
				<view class="sele border-bottom size-32 color3 font-weight-400">{{params.startTime}}</view>
				<view class="sele font-weight-400 color3 size-26">至</view>
				<view class="sele border-bottom size-32 color3 font-weight-400">{{params.endTime}}</view>
			</view>
		</view>
		<u-calendar :show="dateRange" closeOnClickOverlay @close="dateRange=false" :defaultDate="defaultDate" :rowHeight="100" round="32rpx" :showTitle="false" mode="range"
			@confirm="onConfirm" :showLunar="true" :monthNum="12" :maxDate="datesFuture(0)" :minDate="datesFuture(-270)"
			:color="settings.color"></u-calendar>
	</view>
</template>

<script>
	import { datesFuture } from "@/utils/index"
	import { settings } from "@/utils/public"
	export default {
		// props: {
		// 	selectIndex: {
		// 		type: Number,
		// 		default: 0
		// 	}
		// },
		data() {
			return {
				defaultDate: [],
				settings,
				dateRange: false,
				selectDataIndex: 3,
				params: {
					startTime: datesFuture(-7), // 开始日期
					endTime: datesFuture(0), // 结束日期
				},
				selectData: [
					{ name: "今日", type: 1, data: 0 },
					{ name: "昨日", type: 2, data: -1 },
					{ name: "近7日", type: 3, data: -7 },
					{ name: "近30日", type: 4, data: -30 }
				],
			}
		},
		methods: {
			datesFuture,
			// 日期范围
			onConfirm(e) {
				this.processing(e[0], e[e.length - 1], -1)
			},
			onSelectData(item) {
				console.log('item.data',item.data)
				this.processing(datesFuture(item.data), datesFuture(item.data == -1 ? item.data : 0), item.type)
			},
			processing(startTime, endTime, type) {
				const params = {
					selectIndex: type,
					startTime: startTime,
					endTime: endTime
				}
				this.defaultDate = []
				this.params = params
				this.dateRange = false
				this.selectDataIndex = type
				console.log(this.selectDataIndex)
				this.$emit('dateRange', params)
			}
		}
	}
</script>

<style lang="scss">
	.SelectDate {
		::v-deep.uicon-close{
			font-size: 18px!important;
		}
		.pop-section {
			.select-title {
				padding: 28rpx 28rpx 24rpx;
				box-sizing: border-box;
				display: grid;
				grid-column-gap: 38rpx;
				grid-template-columns: repeat(4, 1fr);
			}

			.filter {
				padding: 30rpx 0 24rpx;
			}

			.select-item {
				// width: 100%;
				height: 56rpx;
				background: #F4F4F4;
				border-radius: 4rpx;

			}

			.sele {
				box-sizing: border-box;
				line-height: 82rpx;
			}

			.sele-data {
				display: grid;
				grid-template-columns: 300rpx 1fr 300rpx;
				padding: 34rpx 28rpx 68rpx;
			}

			.button {
				padding: 0 24rpx 24rpx;
			}
		}
	}
</style>